<template>
    <div>
        <h1>这里是父组件</h1>
        <el-alert :title="msg" />
        <el-row :gutter="24">
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerChildClick"></Child>
            </el-col>
            <!-- 清单 -->
            <el-col :span="12">
                <el-car>
                    <h1>清单</h1>
                    <ToDo @add-text="addText" @reset-text="resetText"></ToDo>
                    <ul>
                        <li v-for="(item,index) in list">{{ index+1}}-{{item}}</li>
                    </ul>
                </el-car>
            </el-col>
        </el-row>

        <!-- 名字转化（childClick）驼峰转横杠 -->
        <!-- 子组件自定义事件传值 -->
        <!-- 父组件监听子组件自定义事件调用方法 -->
        <!-- 双向同步？ -->

        <!-- 非父子组件通信 -->
        <!-- 事件总线 EventBus  npm install --save vue3-eventbus -->
        <!-- 在数据接收方注册自定义事件 -->
        <!-- import { onMounted,bus} from vue3-eventbus
        onMounted(){()=>{
            bus.on('getMsg',(value)=>{
                //自定义事件接受参数
            })
        }
        } -->
        <!-- 在数据接发送方注册自定义事件 -->
        <!-- sendMsg=(){
            bus.emit('getMsg',参数) // 触发自定义事件
        } -->
    </div>
</template>
<script>
import { ref } from "vue";
import Child from "./components/Child.vue";
import ToDo from "./components/ToDo.vue";

export default {
    components: {
        Child,
        ToDo,
    },
    setup() {
        const msg = ref("我是父组件的")
        const handlerChildClick = function (value) {
            msg.value = value
        }

        const list = ref([1, 2, 3])
        const addText = function (value) {
            if (value == "") {
            } else {
                list.value.push(value)
            }
        }
        const resetText = function (value) {
            list.value = []
        }
        return {
            msg,
            list,
            handlerChildClick,
            addText,
            resetText,
        };

    }
}

</script>
<style></style>